<template>
  <view class="page_min_height page_pb" style="background-image: linear-gradient(to bottom, #eef5ff, #f5f5f5)">
    <view
      class="flex justify-between items-center px-12 pt-12 pb-22 text-gray-400 bg-[#eef5ff] rounded-bl-xl rounded-br-xl"
    >
      <view>您身边专业的法务服务</view>
      <view class="flex gap-x-10 text-gray-400 text-xs">
        <view class="flex items-center">
          <uni-icons type="checkbox" color="" size="14" />
          <view class="ml-2">专业校对</view>
        </view>
        <view class="flex items-center">
          <uni-icons type="checkbox" color="" size="14" />
          <view class="ml-2">官方出品</view>
        </view>
      </view>
    </view>
    <DataLoading v-if="loading" />
    <view v-else class="px-12">
      <view class="mt-[-10px] p-12 bg-white rounded-md">
        <view class="text-base font-bold">{{ detailInfo.title }}</view>
        <view class="flex justify-between items-center mt-8 mb-12 text-xs">
          <view class="text-gray-400">{{ detailInfo.updated_at }}</view>
          <view class="text-blue-500">#{{ detailInfo.category?.name }}</view>
        </view>
        <!-- 律师信息 -->
        <view v-if="detailInfo.lawyer?.name" class="p-12 page_bg rounded-md">
          <view class="flex justify-between items-center">
            <view class="w-40 h-40 bg-gray-300 rounded-md overflow-hidden">
              <image class="w-40 h-40" :src="detailInfo.lawyer.photo" mode="aspectFill" />
            </view>
            <view class="flex-1 flex justify-between items-center ml-10">
              <view>
                <view class="text-base">{{ detailInfo.lawyer.name }}</view>
                <view class="mt-4 text-xs text-gray-500">执业：{{ detailInfo.lawyer.working_years }}年</view>
              </view>
              <button class="flex reset_btn" open-type="contact">
                <view class="primary_btn px-12 py-6 text-xs rounded-full">立即咨询</view>
              </button>
            </view>
          </view>
          <view class="mt-10 pt-10 text-xs border-t border-solid border-gray-200 text-gray-500 line-clamp-2">
            擅长：{{ detailInfo.lawyer.specialty }}
          </view>
        </view>
        <view class="mt-12">
          <view class="mb-10 text-base font-bold">文章正文</view>
          <rich-text class="leading-[1.6] text-gray-500" :nodes="detailInfo.content"></rich-text>
        </view>
      </view>
      <!-- 广告位 -->
      <view class="mt-12">
        <button class="flex reset_btn" open-type="contact">
          <image src="/static/images/ad.png" class="w-full" mode="widthFix" />
        </button>
      </view>
      <view v-if="dataList.length" class="mt-12 p-12 bg-white rounded-md">
        <view class="mb-12 text-base font-bold">精选文章</view>
        <view v-for="item in dataList" :key="item.id" class="border-t border-solid border-gray-100">
          <ArticleItem :data="item" />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getArticleDetailApi, getArticleListApi } from '@/api/article';
import ArticleItem from '@/components/ArticleItem.vue';

const loading = ref(true);
const detailInfo = ref({});

onLoad(async ({ id }) => {
  const { data } = await getArticleDetailApi(id);
  loading.value = false;
  detailInfo.value = data;
  getDataList();
});

const dataList = ref([]);
// 获取文章列表
async function getDataList() {
  const { code, data } = await getArticleListApi({
    page: 1,
    limit: 5,
    except: detailInfo.value.id,
    order: 'random',
  });
  if (code === 200) {
    data.list.forEach(item => {
      item.contentTxt = item.content.replace(/<[^>]+>/g, '').substr(0, 30);
      item.cover = item.cover || '/static/images/default.png';
    });
    dataList.value = dataList.value.concat(data.list);
  }
}
</script>
